<!--
 * @Description: 
 * @Author: yyang
 * @Date: 2023-02-10 11:00:09
 * @LastEditTime: 2023-06-02 15:19:27
 * @LastEditors: yyang
 * @Reference: 
-->
<script setup lang="ts">
import { ref, watch } from "vue";
import { Overlay, Button } from "vant";
const propsData = defineProps<{
	visible: boolean;
}>();
const emits = defineEmits(["confirm", "cancel"]);

const show = ref(false);

const onConfirm = async () => {
	await emits("confirm");
};
const cancel = async () => {
	await emits("cancel");
};

watch(
	() => propsData.visible,
	() => {
		show.value = propsData.visible;
	}
);
</script>
<template>
	<Overlay :show="show" @click="cancel">
		<div class="wrapper" @click.stop>
			<div class="block">
				<slot></slot>
			</div>
			<div class="btn-wrap">
				<Button type="default" @click.stop="cancel">取消</Button>
				<Button type="primary" @click.stop="onConfirm">确认</Button>
			</div>
		</div>
	</Overlay>
</template>
<style lang="scss" scoped>
.wrapper {
	background-color: #fff;
}

.btn-wrap {
	display: flex;
	justify-content: space-between;
	padding: 10px 10px;
	button {
		// flex: 1;
		width: calc(50% - 5px);
	}
}
</style>
